<template>
	<view>
		<!-- 左侧侧边栏 -->
		<view class="left-list">
			<!-- 列表 -->
			<u-list>
				<!-- 项 -->
				<u-list-item
				v-for="(item, index) in indexList"
				:key="item.id"
				:enableBackToTop="true"
				>
					<view @click="listClick(index,item)">
						<u-cell
						:title="item.title"
						>
						</u-cell>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 图片们 -->
		<view class="listbox">
			<view class="val" v-for="(item,index) in indexList" :key="index">
				<!-- 需要锚点,点击跳转 -->
				<types :id="`to${index}`" :text="item.title" :list="item.list"></types>
			</view>
		</view>
		
		<tabbar :value1="1"></tabbar>
	</view>
</template>

<script>
	import types from '../../components/type/type.vue'
	export default {
		onLoad(option){
			if(option.keyword){
				setTimeout(()=>{
					switch (option.keyword){
						case '中秋节' :
							uni.pageScrollTo({
								selector:`#to0`,
								duration:200
							})
							break;
						case '端午节' :
							uni.pageScrollTo({
								selector:`#to1`,
								duration:200
							})
							break;
						case '元宵节'  :
							uni.pageScrollTo({
								selector:`#to2`,
								duration:200
							})
							break;
						case '医师节' :
							uni.pageScrollTo({
								selector:`#to3`,
								duration:200
							})
							break;
						case '情人节' :
							uni.pageScrollTo({
								selector:`#to4`,
								duration:200
							})
							break;
						case '春节' :
							uni.pageScrollTo({
								selector:`#to5`,
								duration:200
							})
							break;
						case '大理' :
							uni.pageScrollTo({
								selector:`#to6`,
								duration:200
							})
							break;
						case '重庆' :
							uni.pageScrollTo({
								selector:`#to7`,
								duration:200
							})
							break;
						case '西藏' :
							uni.pageScrollTo({
								selector:`#to8`,
								duration:200
							})
							break;
						default:
							break;
					}
				},300)
			}else{
			}
		},
		data() {
			return {
				indexList: [{
					title: '中秋节',
					id: 0,
					list: [
						'https://img.zcool.cn/community/011a265d6dbd11a80120526d6bb20f.jpg@3000w_1l_0o_100sh.jpg',
						'https://img.zcool.cn/community/0184f059f98551a801216a4b6a5ada.jpg@1280w_1l_2o_100sh.jpg',
						'https://img.51miz.com/preview/element/00/01/09/20/E-1092050-A7A98711.jpg',
						'https://img.51miz.com/preview/element/00/01/13/36/E-1133667-8E95DAA6.jpg',
						'https://img95.699pic.com/photo/40178/5457.jpg_wh300.jpg!/fh/300/quality/90',
						'https://img95.699pic.com/photo/40179/1123.jpg_wh300.jpg!/fh/300/quality/90'

					]
				},
				{
					title: '端午节',
					id: 1,
					list: [
						'https://img.51miz.com/preview/element/00/01/11/99/E-1119982-2DBE6A05.jpg',
						'https://img.51miz.com/preview/element/00/01/09/79/E-1097942-17D63A43.jpg',
						'https://bpic.588ku.com/back_our/20210512/bg/80f7b8ff32de1.png',
						'https://x0.ifengimg.com/ucms/2020_26/7D47C08B1FD849C7B902BA07CEA732A4049F3F0A_w1920_h1080.jpg',
						'https://bpic.588ku.com/back_origin_min_pic/20/06/15/23275d4808fb7e78836c9c72bc833915.jpg',
						'https://img.tukuppt.com/ad_preview/00/73/25/608a49fad7d3f.jpg'
					]
				},
				{
					title: '情人节',
					id: 2,
					list: [
						'https://www.yulumi.cn/gl/uploads/allimg/201128/161H4HI-2.jpg',
						'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/06/02/ChMkJ1hGHlmIVCdiAAgNtLihPDkAAYVPwDt3TsACA3M799.jpg',
						'https://img95.699pic.com/photo/40176/9709.jpg_wh860.jpg',
						'https://img.zcool.cn/community/0126cd5c223a47a8012029ac5a32ad.jpg',
						'https://img.zcool.cn/community/0177945dc11398a801209e1fe611b9.jpg',
						'https://img.zcool.cn/community/01a5475dc11398a801209e1f8ec67c.jpg'
					]
				},
				{
					title: "医师节",
					id: 3,
					list: [
						'https://img.51miz.com/preview/element/00/01/10/67/E-1106757-76940D74.jpg',
						'https://img.51miz.com/preview/element/00/01/13/72/E-1137299-B3ADD542.jpg',
						'https://img.51miz.com/preview/element/00/01/10/95/E-1109579-43FAF6BF.jpg',
						'https://img.51miz.com/preview/element/00/01/09/78/E-1097858-2EDBA61C.jpg',
						'https://img-qn-1.51miz.com/preview/video/00/00/11/52/V-115244-8E9A8A20.jpg',
						'https://img.51miz.com/preview/element/00/01/09/78/E-1097892-E28EF2A8.jpg'
					]
				},
				{
					title: '元宵节',
					id: 4,
					list: [
						'https://img.zcool.cn/community/01b4d456c7dd846ac7252ce6101524.jpg@1280w_1l_2o_100sh.jpg',
						'https://img.51miz.com/Element/00/78/43/88/56c8ddbb_E784388_78015e04.jpg',
						'https://img.51miz.com/preview/element/00/01/09/55/E-1095510-A3DEBA6A.jpg',
						'https://img-u-1.51miz.com/preview/video/00/00/12/12/V-121239-5D4F3523.jpg',
						'https://img.tukuppt.com/ad_preview/00/12/18/5c99584a537f9.jpg',
						'https://img.zcool.cn/community/01c7d35a993e8da801206d96c96178.jpg@1280w_1l_2o_100sh.jpg'
					]
				},
				{
					title: '春节',
					id: 5,
					list: [
						'https://img.zcool.cn/community/01cdfa5a8a61c7a8012045b360ba9c.jpg@1280w_1l_2o_100sh.jpg',
						'https://www.henan100.com/d/file/news/hn/one/20190206/e497fa7181f35d495fb0ff1a39bcb4fe.jpg',
						'https://img.zcool.cn/community/01368a5a55f3d5a8012113c79aab10.jpg@1280w_1l_2o_100sh.jpg',
						'https://img.51miz.com/preview/element/00/01/15/08/E-1150815-1D7370FB.jpg',
						'https://tse3-mm.cn.bing.net/th/id/OIP-C.1hYslnffA-j-BlRk9vNcHQHaEK?pid=ImgDet&rs=1',
						'https://tse2-mm.cn.bing.net/th/id/OIP-C.-rSCjdpkwVOC5Y_dVvIxBgHaE6?pid=ImgDet&rs=1'
					]
				},
				{
					title: '大理',
					id: 6,
					list: [
						'https://tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/ef6b89d9709cbbc57450bee935c96af6.jpg_r_640x640_b3d5b36f.jpg',
						'https://dimg05.c-ctrip.com/images/fd/tg/g2/M02/8B/A0/CghzgVWw6vCARCuiABjIYsdKcec275.jpg',
						'https://pic.ntimg.cn/20131230/3822951_172255766000_2.jpg',
						'https://img1.qunarzz.com/travel/d7/1807/b6/8b5ba95638efe0b5.jpg_480x360x95_3476e821.jpg',
						'https://dimg04.c-ctrip.com/images/0101v120008w780kn77ED_C_1600_1200.jpg',
						'https://pic.kuaizhan.com/g3/01/e4/666c-a3d0-4d7b-b722-3c5040fbbd9471/imageView/v1/thumbnail/640x480'
					]
				},
				{
					title: '重庆',
					id: 7,
					list: [
						'https://img.zcool.cn/community/017e1959cd8ccca80121ae0c6b60a1.jpg',
						'https://img.zcool.cn/community/01217e59cd8c97a801204463c829e2.jpg@3000w_1l_0o_100sh.jpg',
						'https://img.zcool.cn/community/01805e5dce5cf2a8012053c09da8ee.jpg@1280w_1l_2o_100sh.jpg',
						'https://dimg07.c-ctrip.com/images/100v0a0000004cvr70EE5_R_1600_10000.jpg',
						'https://dimg08.c-ctrip.com/images/0104b120009cg2tlc173C_R_1600_10000.jpg',
						'https://tse1-mm.cn.bing.net/th/id/OIP-C.arw1WgxJQ60iWeYWDA6CjwHaE8?pid=ImgDet&rs=1'
					]
				},
				{
					title: '西藏',
					id: 8,
					list: [
						'https://youimg1.c-ctrip.com/target/100a0u000000ixv0iE7F9.jpg',
						'https://youimg1.c-ctrip.com/target/100510000000o2u6xE634.jpg',
						'https://tr-osdcp.qunarzz.com/tr-osd-tr-mapi/img/739d6f30fb4d2afcedcc8ece1820c970.jpg_r_720x480x95_104ce386.jpg',
						'https://img.zcool.cn/community/019cb15541d6c00000011541087dc5.jpg@3000w_1l_0o_100sh.jpg',
						'https://youimg1.c-ctrip.com/target/100q190000015zlfj3576.jpg',
						'https://img.zcool.cn/community/013a2a5541d6be000001154169e864.jpg@3000w_1l_0o_100sh.jpg'
					]
				},
				{
					title: '其他',
					id: 9,
					list: [
						'https://img3.52guzhuang.com/forum/201601/18/142525w94x4nji47jf664d.jpg',
						'https://pic3.zhimg.com/v2-9b27eaeb3825e070352e9982af636bcf_r.jpg',
						'https://tse3-mm.cn.bing.net/th/id/OIP-C.0_Erdgk__uUcy-AgcPkPzAHaK6?pid=ImgDet&rs=1',
						'https://img.zcool.cn/community/0167675e846634a801216518524783.jpg@1280w_1l_2o_100sh.jpg',
						'https://img3.52guzhuang.com/forum/202009/22/110835qf454hgnq5n245sh.jpg',
						'https://www.zhongguofeng.com/uploads/allimg/180815/13-1PQ5142001-50.jpg'
					]
				}]
			}
		},
		methods: {
			listClick(index,item){
				// console.log(`锚点${index},to${item.title}`);
				// 跳转到目标锚点位置 叫做滚动
				uni.pageScrollTo({
					selector:`#to${index}`,
					duration:200
				})
			}
			
		},
		components:{
			types
		}
	}
</script>

<style lang="scss">
	.left-list {
		display: block;
		border-right: 1px solid rgba(208,88,124,0.5);
		background-color: rgba(208,88,124,0.1);
		width: 160rpx;
		position: fixed;
		left: 0;
		text-align: center;
		height: 100vh;
	}
	.val{
		// width: 590rpx;
		margin-left: 161rpx;
		padding-left: 1rpx;
	}
	.listbox{
		margin-bottom: 80rpx;
	}
	/deep/.u-cell__title-text{
		color: #dc797c !important;
	}
</style>
